<template>
  <div class="account-balance">
    <div class="header">
      <van-icon name="arrow-left" class="back-icon" @click="goBack"/>
      <h2 style="margin: auto">账户余额</h2>
    </div>
    <div class="balance-section">
      <div class="balance-item">
        <span>充值余额</span>
        <van-tag type="danger" round></van-tag>
      </div>
      <div class="balance-item">
        <span>返佣余额</span>
        <van-tag type="success" round></van-tag>
      </div>
    </div>
    <div class="current-balance">
      当前余额(元)
      <span class="amount">{{ user.accountBalance }}</span>
    </div>
    <div class="detail-section">
      <van-button plain size="small" class="detail-item" @click="showRechargeDetails">充值明细</van-button>
      <van-button plain size="small" class="detail-item" @click="showConsumptionDetails">消费明细</van-button>
      <van-button plain size="small" class="detail-item" @click="showCommissionDetails">返佣明细</van-button>
    </div>
    <div class="recharge-section">
      <div class="recharge-option" v-for="option in rechargeOptions" :key="option.id">
        <span class="amount">{{ option.amount }}</span>
        <span>{{ option.description }}</span>
      </div>
    </div>
    <div class="custom-recharge">
      <span>¥</span>
      <van-field
          v-model="rechargeAmount"
          type="number"
          placeholder="请输入需要充值的金额"
          clearable
          input-align="right"
      />
    </div>
    <div class="recharge-button">
      <van-button type="primary" block @click="recharge">立即充值</van-button>
    </div>
    <van-dialog
        v-model="showDialog"
        title="选择支付方式"
        show-cancel-button
        @confirm="onConfirmPayment"
    >
      <van-radio-group v-model="paymentMethod">
        <van-cell-group inset>
          <van-cell title="微信支付" clickable @click="paymentMethod = 'wechat'">
            <template #right-icon>
              <van-radio name="wechat"/>
            </template>
          </van-cell>
          <van-cell title="支付宝支付" clickable @click="paymentMethod = 'alipay'">
            <template #right-icon>
              <van-radio name="alipay"/>
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-dialog>
  </div>
</template>

<script>
import {Tag, Button, Field, Dialog, RadioGroup, Radio, Cell, CellGroup} from 'vant';
import 'vant/lib/index.css';
import {Toast} from 'vant';
import axios from 'axios';

export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup
  },
  data() {
    return {
      rechargeBalance: 0.00,
      commissionBalance: 0.00,
      currentBalance: 0.00,
      rechargeAmount: '',
      rechargeOptions: [
        {id: 1, amount: '¥1000', description: '活动专享充1000送100'},
        {id: 2, amount: '¥3000', description: '活动专享充3000送400'},
        {id: 3, amount: '¥5000', description: '活动专享充5000送800'}
      ],
      showDialog: false,
      paymentMethod: '',
      transactions: [],
      user: {}
    };
  },
  created() {
    // 模拟获取用户余额信息
    this.rechargeBalance = 1000;
    this.commissionBalance = 500;
    this.currentBalance = 1500;
  },
  mounted() {
    // 模拟获取交易数据
    const userStr = sessionStorage.getItem("userDB");
    if (userStr) {
      try {
        this.user = JSON.parse(userStr);
        console.log(this.user);
      } catch (error) {
        console.error("解析用户数据失败:", error);
      }
    } else {
      console.log("没有找到用户数据");
    }
  },
  methods: {
    showRechargeDetails() {
      this.$router.push({path: '/Mingxi', query: {tab: '充值'}});
    },
    showConsumptionDetails() {
      this.$router.push({path: '/Mingxi', query: {tab: '消费'}});
    },
    showCommissionDetails() {
      this.$router.push({path: '/Mingxi', query: {tab: '返佣'}});
    },
    goBack() {
      this.$router.go(-1);
    },
    recharge() {
      if (this.rechargeAmount) {
        try {
          axios.post(`http://localhost:10086/api/admin/user/updatMoney/${this.user.id}/${this.rechargeAmount}`,).then(response => {
            if (response.status === 200) {
              Toast.success('充值成功');
              console.log("这是money：：")
              console.log(response)
              //存进session
              this.user.accountBalance+=response.data.data;
              sessionStorage.setItem("userDB", JSON.stringify(this.user));
              //退出到上一个空间
              this.$router.go(-1);
            } else {
              Toast.fail('充值失败，请稍后重试');
            }
          });
        } catch (error) {
          Toast.fail('充值请求发送失败，请检查网络或联系客服');
        }
      } else {
        Toast.fail('请输入充值金额');
      }
    },
    onConfirmPayment() {
      // 处理支付方式确认逻辑
      // Toast.success('支付方式已选择');
      this.showDialog = true;
    }
  }
};
</script>

<style scoped>
.account-balance {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #fff;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
  width: 100%; /* 占满父元素宽度 */
}

.back-icon {
  font-size: 20px;
  cursor: pointer;
}

.balance-section {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}

.balance-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.current-balance {
  font-size: 20px;
  margin-bottom: 20px;
}

.amount {
  color: orange;
  font-size: 30px;
}

.detail-section {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
}

.detail-item {
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  padding: 5px 10px;
}

.recharge-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
}

.recharge-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 10px;
  width: calc(33.33% - 20px); /* 调整宽度以适应三列布局，并考虑margin的影响 */
  box-sizing: border-box; /* 确保内边距和边框不会影响总宽度 */
}

.recharge-option .amount {
  text-align: center; /* 让金额文本居中显示 */
  width: 100%; /* 占满父元素宽度 */
  font-weight: bold; /* 可选：使金额字体更突出 */
}

.recharge-option span {
  text-align: center; /* 确保描述文本也居中显示 */
  width: 100%; /* 占满父元素宽度 */
}

.custom-recharge {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.custom-recharge input {
  width: 100px;
  height: 30px;
  margin-left: 5px;
  text-align: center;
}

.recharge-button {
  margin-top: 20px;
}
</style>
